<template>
    <view class="mine-view">
        <view class="tabBar-content">
            <view class="tabBar-item" :class="{ 'tabBar-active': tabBarActive == 1 }" @click="onTabBar(1)">更换手机</view>
            <view class="tabBar-item" :class="{ 'tabBar-active': tabBarActive == 2 }" @click="onTabBar(2)">登录密码</view>
            <view class="tabBar-item" :class="{ 'tabBar-active': tabBarActive == 3 }" @click="onTabBar(3)">支付密码</view>
            <view class="tabBar-item" :class="{ 'tabBar-active': tabBarActive == 4 }" @click="onTabBar(4)">注销账号</view>
        </view>
        <view class="form-view">
            <view class="view-top" v-if="tabBarActive != 4">
                <view>
                    <image src="/static/pc/pc-phone-icon.png" class="phone-image"></image>
                </view>
                <view class="view-text">
                    <view class="text-tit">当前绑定手机号</view>
                    <view class="text-num">130****9966</view>
                </view>
            </view>
            <view class="view-input" v-if="tabBarActive == 1">
                <el-form label-position="right" :model="ruleForm" ref="ruleForm" label-width="100px">
                    <el-form-item label="新手机" class="item-form">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" class="item-form">
                        <el-input v-model="ruleForm.code">
                            <el-button :disabled="verification" class="suffix-but" slot="suffix" @click="countDown()">
                                {{ verificationText }}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="item-formUpLoad">
                        <el-button class="submit-but" type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </view>
            <view class="view-input" v-if="tabBarActive == 2">
                <el-form label-position="right" :model="ruleForm2" ref="ruleForm2" label-width="100px">
                    <el-form-item label="验证码" class="item-form">
                        <el-input v-model="ruleForm2.code">
                            <el-button :disabled="verification" class="suffix-but" slot="suffix" @click="countDown()">
                                {{ verificationText }}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码" class="item-form">
                        <el-input v-model="ruleForm2.name"></el-input>
                    </el-form-item>
                    <el-form-item class="item-formUpLoad">
                        <el-button class="submit-but" type="primary" @click="submitForm('ruleForm2')">保存</el-button>
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </view>
            <view class="view-input" v-if="tabBarActive == 3">
                <el-form label-position="right" :model="ruleForm3" ref="ruleForm3" label-width="100px">
                    <el-form-item label="验证码" class="item-form">
                        <el-input v-model="ruleForm3.code">
                            <el-button :disabled="verification" class="suffix-but" slot="suffix" @click="countDown()">
                                {{ verificationText }}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码" class="item-form">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item class="item-formUpLoad">
                        <el-button class="submit-but" type="primary" @click="submitForm('ruleForm3')">保存</el-button>
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </view>
            <view class="view-write" v-if="tabBarActive == 4">
                <view class="write-tit">注销当前账号</view>
                <view class="write-text">
                    <br />
                    重要注销账号为不可恢复操作，注销账号后您将无法找回本账号，及本账号相关的内容与信息;
                    <br />
                    <br />
                    在您注销账号之前，请您认真阅读，理解并同意以下内容:
                    <br />
                    <br />
                    1.注销账号需满足以下条件:<br />
                    没有资产、欠款、未结清的资金和虚拟权益。账号状态正常 <br />
                    2.注销账号后您将无法找回本账号，及账号相关的任何内容与信息，包括但不限于。<br />
                    ·账号内的个人资料，浏览、收藏、评论、关注等操作的内容;<br />
                    ·账号内产生的订单、余额、虚拟权益等!<br />
                    3.注销账号并不代表注销前的账号中的行为相关责任得到豁免或减轻。<br />
                    1、您的主要收入来源是
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabBarActive: 1,
            verification: false,
            text: "获取验证码",
            second: 60,
            ruleForm: {
                name: "",
                code: ""
            },
            ruleForm2: {
                name: "",
                code: ""
            },
            ruleForm3: {
                name: "",
                code: ""
            },
        };
    },
    computed: {
        verificationText() {
            return this.verification ? this.second + "s" : this.text;
        },
    },
    methods: {
        onTabBar(event) {
            this.tabBarActive = event
        },
        submitForm() {

        },
        countDown() {
            if (this.second && this.second != 0) {
                this.verification = true;
                setTimeout(() => {
                    this.second = this.second - 1;
                    this.countDown();
                }, 1000);
            } else {
                this.verification = false;
                this.second = 60;
            }
        },
    },
};
</script>

<style scoped lang="scss">
.mine-view {
    width: 100%;
    background: white;
    padding: 48px 40px 36px 40px;
    min-height: 610px;

    .tabBar-content {
        @extend .row-start;

        .tabBar-item {
            transition: all 0.3s;
            font-weight: 400;
            font-size: 18px;
            color: #2C1101;
            line-height: 25px;
            font-style: normal;
        }

        .tabBar-item+.tabBar-item {
            margin-left: 32px;
        }

        .tabBar-active {
            font-weight: 600;
            font-size: 20px;
            color: #2C1101;
            line-height: 28px;
            font-style: normal;
            position: relative;
            @extend .row;

            &::after {
                content: "";
                position: absolute;
                bottom: -4px;
                width: 20px;
                height: 4px;
                background: #FF453B;
            }

        }
    }

    .form-view {
        margin-top: 39px;

        .view-top {
            margin-left: 18px;
            @extend .row-start;

            .phone-image {
                width: 38px;
                height: 38px;
            }

            .view-text {
                margin-left: 6px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #2C1101;
                line-height: 17px;
                text-align: left;
                font-style: normal;

                .text-num {
                    margin-top: 1px;
                    font-weight: 600;
                    font-size: 18px;
                    color: #2C1101;
                    line-height: 25px;
                }
            }
        }

        .view-input {
            margin-top: 12px;

            .item-form {
                width: 390px !important;
                border: none;
                margin-bottom: 0;

                .suffix-but {
                    margin: 9px 0;
                    @extend .row;
                    width: 103px;
                    height: 37px;
                    border-radius: 4px;
                    border: 1px solid #FF453B;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FF453B;
                    line-height: 20px;
                }

                /deep/.el-form-item__label {
                    background: #f6f6f6;
                    height: 55px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #a7a7a7;
                    line-height: 22px;
                    text-align: left;
                    font-style: normal;
                    justify-content: right;
                    @extend .row;
                }

                /deep/.el-input__inner {
                    background: #f6f6f6;
                    border: none;
                    height: 55px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #1f0c00;
                    line-height: 22px;
                    text-align: left;
                    font-style: normal;
                }
            }

            .item-formUpLoad {
                margin-top: 20px;

                .upLoad-view {
                    @extend .row-start;

                    .upLoad-IdCard+.upLoad-IdCard {
                        margin-left: 20px;
                    }
                }

                /deep/ .el-form-item__content {
                    margin-left: 0 !important;
                }

                .submit-but {
                    width: 179px;
                    height: 54px;
                    background: #ff453b;
                    border-radius: 4px;
                    border: none;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #ffffff;
                    line-height: 22px;
                    letter-spacing: 2px;
                    text-align: right;
                    font-style: normal;
                    @extend .row;
                }
            }
        }

        .view-write {
            .write-tit {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 20px;
                color: #2C1101;
                line-height: 27px;
                text-align: left;
                font-style: normal
            }

            .write-text {
                color: #2C1101;
                font-size: 16px;
                line-height: 27px;
            }
        }
    }

}
</style>